<template>
  <div>
    <banner :imgUrl="imgUrl"></banner>
    <div class="container">
      <div class="recommend">
        <hot-list :hotPlaylist="hotPlaylist" :hotPlay="hotPlay"></hot-list>
        <new-list :newList="newList"></new-list>
        <rank-list :listTotal="listTotal" :list="list"></rank-list>
      </div>
      <div class="singer">
        <singer :artistList="artistList"></singer>
        <dj :djList="djList"></dj>
      </div>
    </div>
    <back-top></back-top>
  </div>
</template>

<script>
import Banner from './childcpns/Banner';
import HotList from './childcpns/HotList';
import NewList from './childcpns/NewList';
import RankList from './childcpns/RankList';
import Singer from './childcpns/Singer'
import Dj from './childcpns/Dj'

import BackTop from '@/components/common/backtop/BackTop'

import { _getBanner, _getHotPlaylist, _getHotPlay, _getNewList, _topList, _musicList, _getArtists, _getDj } from "@/network/discover";

export default {
  components: {
    Banner,
    HotList,
    NewList,
    RankList,
    Singer,
    Dj,
    BackTop
  },
  data() {
    return {
      imgUrl: null,
      hotPlaylist: null,
      hotPlay: null,
      newList: null,
      list: null,
      listTotal: [],
      artistList: null,
      djList: null
    }
  },
  created() {
    //获取轮播图片
    _getBanner().then(err => {
      this.imgUrl = err.banners;
    })
    // 获取推荐歌单分类
    _getHotPlaylist().then(res => {
      this.hotPlaylist = res.tags
    })
    // 获取推荐歌单
    _getHotPlay().then(res => {
      this.hotPlay = res.result
    })
    // 获取新碟上架数据
    _getNewList().then((res) => {
      this.newList = res.albums;
    })
    // 获取排行榜
    _topList().then(res => {
      this.list = res.list.slice(0, 3)
      // 获取每个排行榜的歌单
      for (let i = 0; i < 3; i++) {
        _musicList(this.list[i].id).then(res => {
          let listOne = res.playlist.tracks.slice(0, 10)
          this.listTotal.push(listOne)
        })
      }
    })
    // 获取热门歌手信息
    _getArtists().then((res) => {
      this.artistList = res.artists.slice(0, 8)
    })
    // 获取前5个热门主播
    _getDj(5).then(res => {
      this.djList = res.data.list
    })
  }
}
</script>

<style scoped>
.container {
  display: flex;
  width: 980px;
  margin: 0 auto;
}

/* 左侧音乐榜单 */
.recommend {
  width: 750px;
  height: 100%;
  padding: 20px 20px 40px;
  border-left: 1px solid #555;
  border-right: 1px solid #555;
}

/* 右侧歌手榜单 */
.singer {
  width: 228px;
  padding: 0 15px;
  border-right: 1px solid #555;
}
</style>